<template>
	<a-modal v-bind="modalConfig">
		<vxe-grid ref="grid" v-bind="gridOptions"></vxe-grid>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, toRef, watch} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {operationLog} from '@/api/contract'

	const props = defineProps<{
		visible: boolean
		id: string
	}>()

	const emits = defineEmits(['update:visible', 'close'])
	const modalConfig = reactive({
		width: 800,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		footer: null,
		visible: toRef(props, 'visible'),
		title: '手机号信息变更记录',
		bodyStyle: {
			padding: '20px 15px'
		},
		onCancel() {
			emits('update:visible', false)
		}
	})

	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		maxHeight: 500,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '变更内容',
				align: 'left',
				field: 'operationExplain',
				minWidth: 300
			},
			{
				title: '操作人',
				align: 'left',
				field: 'operationUserName'
			},
			{
				title: '操作时间',
				align: 'left',
				field: 'operationTime'
			}
		],
		data: []
	})

	const getList = (id: string) => {
		operationLog({businessId: id}).then(res => {
			gridOptions.data = res.data.records || []
		})
	}

	watch(
		() => props.visible,
		newId => {
			getList(props.id)
		}
	)
</script>

<style lang="less" scoped></style>
